<!-- 更换车牌号 -->
<template>
  <a-modal
    v-model:visible="showModal"
    @close="onClose"
    @before-ok="onConfirm"
    :title="pageTlt"
    :mask-closable="false"
    class="modal-dialog-wrapper"
    unmount-on-close
    width="45vw"
  >
    <page-form :model="form" layout="vertical" style="width: 100%; height: 200px" :rules="rules" ref="formRef">
      <div class="my-lic">
        当前车牌号：<p>{{ carInfo.licenseNo || '-' }}</p>
      </div>
      <page-form-item style="margin-top: 10px" field="licenseNo" label="需要更换的车牌号" required size="1/2">
        <a-input placeholder="请输入" allow-clear v-model="form.licenseNo" :max-length="10" />
      </page-form-item>
    </page-form>
  </a-modal>
</template>

<script setup lang="ts" name="CarChangelicense">
  import { ref } from 'vue'
  import { changeLicenseNo, checkLicenseNo, checkReturnCar } from '@/api/asset/car'
  import { Modal } from '@arco-design/web-vue'
  import useNavigate from '@/hooks/useNavigate'

  const { navigateTo } = useNavigate()

  const form = ref({
    id: '',
    licenseNo: '',
  })

  const rules = {
    licenseNo: [{ required: true, message: '请填写车牌号' }],
  }

  const showModal = ref(false)
  const pageTlt = ref('更换车牌号') //标题
  const carInfo = ref<any>({})

  const show = (record) => {
    console.log('更换车牌号', record)

    form.value.id = record.id
    carInfo.value = record
    showModal.value = true
  }

  const onClose = () => {
    showModal.value = false
    form.value = {}
  }

  const emit = defineEmits(['savelicense'])

  const formRef = ref()
  const validateFn = () => {
    return new Promise((resolve, reject) => {
      formRef.value.validate((error) => {
        if (error) {
          console.log(error)
          reject()
        } else {
          resolve()
        }
      })
    })
  }

  // 确定更换车牌号
  const confirmChangeLicenseNo = (resolve, reject, done) => {
    changeLicenseNo({ ...form.value })
      .then(() => {
        emit('savelicense')
        showModal.value = false
        done()
        resolve()
      })
      .catch(() => {
        reject()
      })
  }

  const onConfirm = (done) => {
    return new Promise((resolve, reject) => {
      validateFn()
        .then(async () => {
          if (carInfo.value.source === 2) {
            try {
              const _ = await checkLicenseNo({ licenseNo: form.value.licenseNo, vin: carInfo.value.vin, carInfoId: carInfo.value.id })

              const { code, result } = await checkReturnCar({ licenseNo: form.value.licenseNo, modelId: carInfo.value.modelId })
              if (code == 200) {
                if (!result) {
                  confirmChangeLicenseNo(resolve, reject, done)
                } else {
                  Modal.confirm({
                    title: '提示',
                    content: '当前车牌号在已归还的车辆中已存在，请确认是否需要再次借入？',
                    cancelText: '关闭',
                    okText: '再次借入',
                    onOk: () => {
                      navigateTo(
                        `/car-transfer/create?form=car-manage&source=${carInfo.value.source}&licenseNo=${form.value.licenseNo}&modelId=${carInfo.value.modelId}`,
                        `${form.value.licenseNo}-再次借入`
                      )
                      done()
                    },
                    onCancel: () => {
                      reject()
                    },
                  })
                }
              } else {
                reject()
              }
            } catch (error) {
              console.log('error', error)
              reject()
            }
          } else {
            confirmChangeLicenseNo(resolve, reject, done)
          }
        })
        .catch(() => {
          reject()
        })
    })
  }

  defineExpose({
    show,
  })
</script>

<style lang="less" scoped>
  :deep(.arco-row-justify-start) {
    justify-content: space-between;
  }
  :deep(.arco-col-19) {
    flex: 0 0 60% !important;
    width: 60% !important;
  }
  :deep(.page-form-item-label) {
    width: 350px;
  }
  .my-lic {
    font-size: 12px;
    p {
      font-size: 24px;
      font-weight: 600;
      margin-top: 4px;
    }
  }
  .lin-in {
    margin-top: 30px;
  }
</style>
